import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Table,
} from 'antd';
import GeneralTableComponent from 'components/GeneralTableComponent';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Bar } from 'components/Charts';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { Option } = Select;
const RangePicker = DatePicker.RangePicker;

@connect(({ conversionData, loading }) => ({
  conversionData,
  loading: loading.models.conversionData,
}))
@Form.create()
export default class ConversionData extends PureComponent {
  state = {
    modalVisible: false,
    paramList: {
      pageNo: 1,
      startTime: '',
      endTime: '',
      source: '',
    },
  };

  componentWillMount() {
    const { paramList } = this.state;
    switch(this.props.location.pathname.split('/')[1]) {
      case 'statisticsCenterForXBeauty':
        paramList.source = 'xbeauty';
      break;
      case 'statisticsCenterForXflower':
        paramList.source = 'xflower';
      break;
      case 'statisticsCenterForUpoint':
        paramList.source = 'upoint';
      break;
      default:
      break;
    }
  }

  componentDidMount() {
    this.getConversionData();
    this.getTotalConversionData();
  }

  getConversionData = () => {
    const { dispatch } = this.props;
    const { paramList } = this.state;
    let postParam = {
      source: paramList.source,
      pageNo: paramList.pageNo,
      startTime: '',
      endTime: '',
    };
    postParam.startTime = paramList.startTime ? paramList.startTime : moment().subtract(7, 'days').format('YYYY-MM-DD hh:mm:ss');
    postParam.endTime = paramList.endTime ? paramList.endTime : moment().format('YYYY-MM-DD hh:mm:ss');
    dispatch({
      type: 'conversionData/fetchGetConversionList',
         payload:{
          ...postParam
      }
    });
  };

  getTotalConversionData = () => {
    const { dispatch } = this.props;
    const { paramList } = this.state;
    let postParam = {
      startTime: '',
      endTime: '',
      source: '',
    }
    postParam.startTime = paramList.startTime ? paramList.startTime : moment().subtract(7, 'days').format('YYYY-MM-DD hh:mm:ss');
    postParam.endTime = paramList.endTime ? paramList.endTime : moment().format('YYYY-MM-DD hh:mm:ss');
    postParam.source = paramList.source;
    dispatch({
      type: 'conversionData/fetchGetTotalConversionList',
      payload:{
        ...postParam
      }
    });
  };

  handleSelectChange = (value) => {
    // const { paramList } = this.state;
    // paramList.pageNo = 1;
    // this.getTotalConversionData();
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { paramList } = this.state;
    paramList.pageNo = pagination.current;
    this.getConversionData();
  };

  handleDateChange = (dates, dateStrings) => {
    const {paramList} = this.state;
    paramList.startTime = dates[0] ? dates[0].format('YYYY-MM-DD hh:mm:ss') : moment().subtract(7, 'days').format('YYYY-MM-DD hh:mm:ss');
    paramList.endTime = dates[1] ? dates[1].format('YYYY-MM-DD hh:mm:ss') : moment().format('YYYY-MM-DD hh:mm:ss');
    paramList.pageNo = 1;
    this.getTotalConversionData();
  };

  formatData = (_srcData) => {
    let dataBuf = [{
      x: '注册',
      y: _srcData.registerNumber,
    }, {
      x: ( _srcData.registerNumber ? (_srcData.loginNumber / _srcData.registerNumber * 100).toFixed(1) : 0 ) + '%' + '-->登录',
      y: _srcData.loginNumber,
    }, {
      x: ( _srcData.loginNumber ? (_srcData.zhimaNumber / _srcData.loginNumber * 100).toFixed(1) : 0 ) + '%' + '-->芝麻',
      y: _srcData.zhimaNumber,
    }, {
      x: ( _srcData.zhimaNumber ? (_srcData.submitRiskNumber / _srcData.zhimaNumber * 100).toFixed(1) : 0 ) + '%' + '-->提交成功',
      y: _srcData.submitRiskNumber,
    }, {
      x: ( _srcData.submitRiskNumber ? (_srcData.riskNumber / _srcData.submitRiskNumber * 100).toFixed(1) : 0 ) + '%' + '-->认证成功',
      y: _srcData.riskNumber,
    }, {
      x: ( _srcData.riskNumber ? (_srcData.idCardNumber / _srcData.riskNumber * 100).toFixed(1) : 0 ) + '%' + '-->活体',
      y: _srcData.idCardNumber,
    }, {
      x: ( _srcData.idCardNumber ? (_srcData.bankNumber / _srcData.idCardNumber * 100).toFixed(1) : 0 ) + '%' + '-->绑卡',
      y: _srcData.bankNumber,
    }, {
      x: ( _srcData.bankNumber ? (_srcData.memberNum / _srcData.bankNumber * 100).toFixed(1) : 0 ) + '%' + '-->会员购买',
      y: _srcData.memberNum,
    }, {
      x: ( _srcData.memberNum ? (_srcData.paymenNumber / _srcData.memberNum * 100).toFixed(1) : 0 ) + '%' + '-->放款提现',
      y: _srcData.paymenNumber,
    }, ];
    return dataBuf
  };

  render() {
    const { conversionData: { converData, converAllData }, loading } = this.props;

    const _barData = converAllData ? this.formatData(converAllData) : [];

    const tableColumns = [
      {
        title: '日期',
        key: 'date',
        dataIndex: 'date',
      },
      {
        title: '注册',
        key: 'registerNumber',
        dataIndex: 'registerNumber',
      },
      {
        title: '登录',
        key: 'loginNumber',
        dataIndex: 'loginNumber',
      },
      {
        title: '芝麻',
        key: 'zhimaNumber',
        dataIndex: 'zhimaNumber',
      },
      {
        title: '提交成功',
        key: 'submitRiskNumber',
        dataIndex: 'submitRiskNumber',
      },
      {
        title: '会员购买',
        key: 'memberNum',
        dataIndex: 'memberNum',
      },
      {
        title: '认证成功',
        key: 'riskNumber',
        dataIndex: 'riskNumber',
      },
      {
        title: '活体',
        key: 'idCardNumber',
        dataIndex: 'idCardNumber',
      },

      {
        title: '绑卡',
        key: 'bankNumber',
        dataIndex: 'bankNumber',
      },
      {
        title: '放款提现',
        key: 'paymenNumber',
        dataIndex: 'paymenNumber',
      },
    ];
    const allColumns = [
      {
        title: '注册',
        key: 'registerNumber',
        dataIndex: 'registerNumber',
      },
      {
        title: '登录',
        key: 'loginNumber',
        dataIndex: 'loginNumber',
      },
      {
        title: '芝麻',
        key: 'zhimaNumber',
        dataIndex: 'zhimaNumber',
      },
      {
        title: '提交成功',
        key: 'submitRiskNumber',
        dataIndex: 'submitRiskNumber',
      },
      {
        title: '会员购买',
        key: 'memberNum',
        dataIndex: 'memberNum',
      },
      {
        title: '认证成功',
        key: 'riskNumber',
        dataIndex: 'riskNumber',
      },
      {
        title: '活体',
        key: 'idCardNumber',
        dataIndex: 'idCardNumber',
      },
      {
        title: '绑卡',
        key: 'bankNumber',
        dataIndex: 'bankNumber',
      },
      {
        title: '放款提现',
        key: 'paymenNumber',
        dataIndex: 'paymenNumber',
      },
    ]
    let _arr =[];
    converAllData? _arr.push(converAllData): ''
    return (
      <PageHeaderLayout title="转化统计">
        <Card bordered={false}>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
            <Col md={10} sm={12}>
              <Select
                defaultValue="registerIn"
                style={{ width: 120 }}
                onChange={this.handleSelectChange}
              >
                <Option value="registerIn">注册转化</Option>
              </Select>
            </Col>
            <Col md={6} sm={24} />
            <Col md={8} sm={24}>
              <RangePicker
                ranges={{
                  近7天: [moment().subtract(7, 'days'), moment()],
                  近14天: [moment().subtract(14, 'days'), moment()],
                  近30天: [moment().subtract(30, 'days'), moment()],
                }}
                defaultValue={[moment().subtract(7, 'days'), moment()]}
                onChange={this.handleDateChange}
              />
            </Col>
          </Row>

          <span>完成率：</span>
          <span>[所有用户]{_barData[0] && _barData[0].y ? (_barData[8].y / _barData[0].y * 100).toFixed(1) : 0}%</span>

          <Bar height={200} data={_barData} />

          <div style={{marginTop:30, marginBottom: 30}}>
            <Table columns={allColumns} dataSource={_arr} pagination={false} rowKey={record => record.paymenNumber} />
          </div>
         <GeneralTableComponent
            loading={loading}
            data={converData}
            columns={tableColumns}
            onChange={this.handleStandardTableChange}
            rowKey={'date'}
          />                     
         
        </Card>
      </PageHeaderLayout>
    );
  }
}
